<template>
    <div class='tag-page'>
        <h1>评论区</h1>
        <h2>请选择字体颜色：</h2>
        <div class="color">
            <label :for="item" v-for="item in colorList" :key="item" :style="{ background: item, marginLeft: '5px' }">
                <input type="radio" :id="item" name="color" v-model="color" :value="item">
                {{ item }}
            </label>
        </div>
        <ul>
            <li v-for="item in tagList" :key="item.id"><span :style="{ color: item.color }">{{
                item.content }}</span>
                <span @click="deleteFn(item.id)">X</span>
            </li>
        </ul>
        <div class="updata">
            <textarea name="content" id="" class="text" v-model="content"></textarea>
            <button @click="fn">提交</button>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    name: 'tag-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: 'tag-page'
        }
    },
    setup() {
        let colorList = ['red', 'green', 'blue', 'yellow', 'bloack'];
        let color = ref('red');
        let content = ref('');
        let tagList = ref([
            { id: '1', content: '标签1', color: 'red' },
        ]);
        let fn = () => {
            if (!content.value) {
                alert('请输入内容');
                return;
            }
            tagList.value.push({ id: Math.random() + "", content: content.value, color: color.value });
            content.value = '';
        };
        let deleteFn = (id) => {
            tagList.value = tagList.value.filter(item => item.id !== id);
        }
        return {
            colorList,
            color,
            tagList,
            content,
            fn,
            deleteFn,
        }
    }
}
</script>

<style scoped lang="less">
.tag-page {
    width: 40%;
    margin: 0 auto;
    border: 1px solid #000;
    padding: 10px;

    & ul {
        list-style: none;
        padding: 0;
        height: 180px;

        li {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px #ccc dotted;
            margin: 5px;
        }
    }

    & .updata {
        display: flex;

        & .text {
            width: 90%;
            height: 80px;
        }

        & button {
            width: 10%;
            height: 85px;
        }
    }

}
</style>